<template>
    <div class="movieContent-main" v-loading="loading"   element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="movieAll">
          <div class="classroom-main">
              <el-breadcrumb separator-class="el-icon-arrow-right" >
                <el-breadcrumb-item class="hander" to="/main/index">首页</el-breadcrumb-item>
                <el-breadcrumb-item class="hander" to="/main/movieList">点播课程</el-breadcrumb-item>
                <el-breadcrumb-item>课程详情</el-breadcrumb-item>
              </el-breadcrumb>
          </div>
          <div class="courser-top">
            <img :src="$axios.defaults.baseURL+content.photo" alt="" class="course-main">
            <div class="course-right">
              <h3 class="title">{{content.title}}</h3>
              <!-- <img src="@/assets/images/vip-icon.png" alt="" class="vip-icon"> -->
              <div class="ping">
                <span class="title1">评价：</span>
                <el-rate :v-model="content.score" disabled show-score text-color="#ff9900" score-template="{value}" class="rate-main"></el-rate>
                <span class="teacher1">({{content.buyCount}}人学习)</span>
              </div>
              <p class="price" >￥166<span class="old-price" >￥{{content.presentPrice}}</span> </p>
              <p class="price" v-if="content.courseVipType=='1'">会员课程 </p>
              <!-- <p class="price" >免费课程 </p> -->
              
              <el-button type="primary"  class="sou" v-show="false" @click="collect">取消收藏</el-button>
              <p class="content">{{content.introduction}}</p>
              
              <div class="mai" v-show="!content.buy && !content.isTree" @click="buyCourse">观看课程</div>
              <div class="mai" @click="see" v-show="content.buy || content.isTree">立即观看</div>
              <div class="see" @click="see" v-show="!content.buy && !content.isTree && content.auditionFlag=='1'">立即试看</div>
              <div class="xin">
                <!-- <span class="number iconfont iconzan" v-show="!content.zan" @click="setZan"></span>
                <span class="number iconfont iconzan iconzan1 " v-show="content.zan" @click="setZan"></span> -->
                <i class="iconfont iconxin" v-show="!content.coll" @click="collect"></i>
                <i class="iconfont iconxin iconxin1" v-show="content.coll" @click="collect"></i>
              </div>
            </div>
          </div>
          <div class="course-content1">
            <div class="content-left">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="课程概览" name="first">
                  <div class="course-text" v-html="content.description">
                    
                  </div>
                </el-tab-pane>
                <el-tab-pane label="课程目录" name="second">
                  <div class="mulumain">
                    <div class="mulu-item " style="height:110px;"v-for="(item,index) in muluList1">
                      <div class="progress-top">
                        <span class="top-title">{{item.educationVideo.title}}</span>
                        <div class="right">
                          <span class="name1">学习进度：</span>
                          <el-progress :percentage="item.study"></el-progress>
                        </div>
                        
                      </div>
                      <span class="man ">{{item.playCount}}<span class="iconfont iconwodeicon" style="font-size:18px"></span></span>
                      <span class="name iconbofang2 iconfont"></span>
                      <div class="bofang" style="top:55px;right:40px;background:#ff6c62;" v-show="!content.buy && !content.isTree && content.auditionFlag=='1'" @click="goSee(item)">立即试看</div>
                      <div class="bofang" style="top:55px;right:40px;background:#ff6c62;" v-show="content.buy || content.isTree" @click="goSee(item)">立即观看</div>
                      <div class="bofang" style="top:55px;right:40px;background:#ff6c62;" v-show="!content.buy && !content.isTree && content.auditionFlag=='0'" @click="buyCourse">请购买</div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="学员问答" name="third">
                  <div class="taolun">
                    <div class="text-main">
                      <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea" class="top-textarea"></el-input>
                      <div class="button" @click="comment">提问</div>
                      <div class="submit-button" @click="comment">立即询问</div>
                      <div style="clear:both"></div>
                    </div>
                    <div class="taolun-content">
                      <div class="taolun-item" v-for="(item,index) in taoList">
                        <img :src="$axios.defaults.baseURL+item.userPhoto" alt="" class="man-img" />
                        <span class="name">{{item.userName}}</span>
                        <p class="content">{{item.content}}</p>
                        <div class="taolun-bottom">
                          <span class="time">{{item.createDate}}</span>
                          <div class="huifu">
                            <span class="text" @click="huifu(index,'1',item)">回复</span>
                            <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'1',item)"> -->
                          </div>
                        </div>
                        <div class="huifuList" v-show="item.educationContentList.length!=0">
                          <div class="huifu-item" v-for="(item1,index1) in item.educationContentList" :class="item1.addClass">
                            <p class="content1" v-show="item1.businessName!=''">{{item1.userName}} 回复 {{item1.businessName}}：<span style="color:#222222">{{item1.content}}</span></p>
                            <p class="content1" v-show="item1.businessName==''">{{item1.userName}}：<span style="color:#222222">{{item1.content}}</span></p>
                            <div class="huifu-bottom">
                              <span class="time1">{{item.createDate}}</span>
                              <div class="huifu">
                                <!-- <span class="text" @click="huifu(index,'2',item1)">回复</span> -->
                                <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'2',item1)"> -->
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="text-main1" v-show="item.show">
                          <el-input type="textarea" :rows="10"  v-model="textarea1" :placeholder="message"></el-input>
                          <span class="hui" @click="comment(items,index,'1')">回复</span>
                        </div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total" @pageChange="pageChange" :size="pageSize"></ui-pagination>
                  </div>
                  
                </el-tab-pane>
                <el-tab-pane label="学员评价" name="fourth">
                  <div class="ping-main">
                    <div class="ping">
                      <span class="title1">课程评分：</span>
                      <el-rate v-model="number1"  show-score text-color="#ff9900" score-template="{value}" class="rate-main"></el-rate>
                    </div>
                    <div class="text-main">
                      <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea2" class="top-textarea"></el-input>
                      <div class="button" @click="submit">提交</div>
                    </div>
                    <div class="pingList">
                      <div class="pingList-item" v-for="(item,index) in allPing" :class="item.addClass">
                        <img :src="$axios.defaults.baseURL+item.photo" alt="">
                        <div class="ping-right">
                          <span class="man">{{item.userName}}</span>
                          <span class="time">{{item.createDate}}</span>
                          <p class="content">{{item.content}}</p>
                        </div>
                      </div>
                    </div>
                    <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total1" @pageChange="pageChange1" :size="10"></ui-pagination>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="课程资料" name="five">
                  <div class="mulumain">
                    <div class="mulu-item " style="height:110px;"v-for="(item,index) in muluList3">
                      <span class="text">课程资料</span>
                      <span class="name">{{item.title}}</span>
                      <div class="bofang" style="top:55px;" ><a :href="item.files"  download target="_blank">下载资料</a></div>
                    </div>
                  </div>
                </el-tab-pane>
                
              </el-tabs>
            </div>
            <div class="content-right">
              <h3 class="title">热门课程</h3>
              <div class="hot-all">
                <div class="hot-item" v-for="(item,idnex) in 4" @click="goContent(item)">
                  <img src="@/static/image/course1.jpg" alt="">
                  <span class="name">课程标题</span>
                  <span class="price" >￥188</span>
                  <span class="price" v-if="item.courseVipType=='1'">会员课程 </span>
                  <span class="price" v-if="item.courseVipType=='3'">免费课程 </span>
                </div>
              </div>
            </div>
          </div>
          <div style="clear:both"></div>
        </div>
    </div>
</template>

<script>

import Pagination from '@/components/pagination.vue'

import Cookies from 'js-cookie'
import { Notification } from 'element-ui';



export default {
  components: {
    'ui-pagination':Pagination
  },
  props:{
  },
  data(){
    return{
      loading:false,
      isColl:false,
      isBuy:false,
      buttonTitle:'',
      html:"asdasd阿三打扫打扫打扫",
      data:4.5,
      newsList:[
      ],
      total:0,
      total1:0,
      activeName:'first',
      textarea2:'',
      textarea:'',
      textarea1:'',
      id:"",
      message:"",
      taoList:[
        {
          userName:'刘老师',
          content:'当micro：bit遇上Li：bit时激光切割：激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案--突来的创意须被即时的创造。',
          time:'2019-08-08 12:15:36',
          show:false,
          educationContentList:[
            {name1:'刘老师',name2:'马老师',content:'激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.',time:'2019-08-08 12:15:36'},
            {name1:'刘老师',name2:'马老师',content:'激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案',time:'2019-08-08 12:15:36'},
            {name1:'刘老师',name2:'马老师',content:'激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.',time:'2019-08-08 12:15:36',addClass:'no-border'},
          ],
        },
      ],
      muluList1:[
        
      ],
      muluList2:[
      ],
      muluList3:[
      ],
      number:4,
      content:{
        educationTeacher:{},
        description:"简介：执业医师（英文：Practicing physician）是指具有医师执业证及其“级别”为“执业医师”且实际从事医疗、预防保健工作的人员，不包括实际从事管理工作的执业医师。执业医师应当具备良好的职业道德和医疗执业水平，发扬人道主义精神，履行防病治病、救死扶伤、保护人民健康的神圣职责。全社会应当尊重医师。医师依法履行职责，受法律保护。"
      },
      activeIndex1:'0',
      activeIndex2:'0',
      items:{},
      activeIndex3:'0',
      saiList:[
        {name:'更新时间'},
        {name:'浏览量'},
        {name:'学习人数'},
      ],
      pageSize:6,
      courseList:[
        
      ],
      number1:5,
      allPing:[],
      pageNo:1,
      pageNo1:1,
      vip:false,
    }
  },
  head() {
    return {
      title: '课程详情',
      meta: [
        {
          hid: 'description',
          name: 'description',
          ccontent: '网校，黄山网校，在线学习，在线教育'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: '网校，黄山网校，在线学习，在线教育'
        },
      ]
    }
  },
  watch:{
    idChange(){
      // this.getData();
      // this.getCom();
      // this.getRecom();
      // this.getcomment();
    }
  },
  computed:{
    
  },
  mounted(){
    // $('.el-scrollbar__wrap').animate({scrollTop: '0px'}, 0);
  },
  created(){
     this.getData();
    // this.getCom();
    // this.getList();
    // this.getRecom();
    // this.getcomment();
    // this.addCenter();
  },
  methods:{
    see(){
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      if(this.content.buy){
        Cookies.set("seeType","yes");
      }
      else if(!this.content.buy && this.content.auditionFlag=="1"){
        Cookies.set("seeType","no");
        Cookies.set("time",this.content.auditionTimes);
      }
      var routeData = this.$router.resolve({ path: "/see/"+this.$route.params.id+"/0"});
      window.open(routeData.href, '_blank');
    },
    setFree(){
      var that = this;
      this.$axios.$get("/f/user/freeCountSub?courseId="+this.$route.params.id)
      .then(function (response) {
        Notification.success({
          title:'提示',
          message:"成功消耗一次机会"
        });
        let number = Number(Cookies.get('freeCount'));
        Cookies.set("freeCount",number-1,{ expires: 1 });
        that.getData();
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    buyCourse(){

        this.$router.push("/play");
        return;
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      let number = Number(Cookies.get('freeCount'));
      if(number>0){
        console.log(222)
        this.$confirm(`您有${number}次免费观看课程次数,是否消耗1次机会免费观看该课程`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '拒绝',
          type: 'warning'
        }).then(() => {
          this.setFree();
        }).catch(() => {
          if(this.content.youhuiFlag=="1"  && !this.vip){
          this.$confirm('您还未开通会员，请先开通会员?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push("/main/vip");
              
          }).catch(() => {
                      
          });
          return;
        }
        Cookies.set("courseType","1");
        this.$router.push("/main/orderPage/"+this.$route.params.id);         
        });
        return;
      }
      else{
        if(this.content.youhuiFlag=="1"  && !this.vip){
          this.$confirm('您还未开通会员，请先开通会员?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push("/main/vip");
              
          }).catch(() => {
                      
          });
          return;
        }
        Cookies.set("courseType","1");
        this.$router.push("/main/orderPage/"+this.$route.params.id);
      }
      
    },
    goSee(item){
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      if(this.content.buy){
        Cookies.set("seeType","yes");
      }
      else if(!this.content.buy && this.content.auditionFlag=="1"){
        Cookies.set("seeType","no");
        Cookies.set("time",this.content.auditionTimes);
      }
      else if(!this.content.buy && this.content.auditionFlag=="0"){
          Notification.warning({
            title:'提示',
            message:"请先报名购买课程"
          });
          return;
      }
      var routeData = this.$router.resolve({ path: '/see/'+this.$route.params.id+"/"+item.id});
      window.open(routeData.href, '_blank');
    },
    pay(){
      if(!Cookies.get("type")){
        this.$router.push("/mainAll/login");
        return;
      }
      if(this.content.auditionFlag=="1"){
        Cookies.set("seeType","no");
        var routeData = this.$router.resolve({ path: "/see/"+this.$route.params.id+"/0"});
        window.open(routeData.href, '_blank');
        return;
      }
      var that = this;
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/order/addCourseOrder?courseId="+this.$route.params.id+"&type=1&number=1")
      .then(function (response) {
        that.$router.push("/mainAll/courseOrder/"+response.data.id)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    pageChange1(index){
        this.pageNo1 = index;
        this.getList();
    },
    getList(){
      var that = this;
      this.$axios.$get("/f/common/getCourseScore?id="+this.$route.params.id+"&type=1"+"&pageNo="+this.pageNo1+"&pageSize=10")
      .then(function (response) {
        var data = response.data;
        var len = data.length;
        if(len!=0){
          that.total1 = response.count;
          for(var i=0;i<len;i++){
            data[i].photo = "http://seed.ckwashington.com/admin" + data[i].photo;
          }
          data[len-1].addClass = "no-border";
          that.allPing = data;
        }
        
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    submit(){
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      if(this.textarea2==""){
        Notification.warning({
          title:'提示',
          message:"请输入内容"
        })
        return;
      }
      var that = this;
      this.$axios.$post("/f/common/addPingFen?id="+this.$route.params.id+"&score="+this.number1+"&content="+this.textarea2+"&type=1")
      .then(function (response) {
        Notification.success({
          title:'提示',
          message:"已提交"
        });
        that.getList();
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    setZan(){
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      var that = this;
      this.$axios.$post("/f/common/addZan?type=1&id="+this.$route.params.id)
      .then(function (response) {
        if(!that.content.zan){
          that.content.zan = true;
          Notification.success({
            title:'提示',
            message:"已点赞"
          })
        }
        else{
          that.content.zan = false;
          Notification.success({
            title:'提示',
            message:"取消点赞"
          })
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    collect(){
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      var that = this;
      this.$axios.$post("/f/common/addCollec?type=1&id="+this.$route.params.id)
      .then(function (response) {
        if(!that.content.coll){
          that.content.coll = true;
          Notification.success({
            title:'提示',
            message:"收藏成功"
          })
        }
        else{
          that.content.coll = false;
          Notification.success({
            title:'提示',
            message:"已取消收藏"
          })
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    pageChange(index){
        this.pageNo = index;
        this.getCom();
    },
    huifu(index,type,item){
      console.log(index,type);
      if(type=="1"){
        this.id = item.id;
      }
      else{
        this.id = this.taoList[index].id;
      }
      this.message = "回复"+item.userName;
      var len = this.taoList.length;
      for(var i=0;i<len;i++){
        if(i==index){
        console.log(this.taoList[i])
          this.taoList[i].show = true;
        }
        else{
          this.taoList[i].show = false;
        }
      }
      var item = item;
      item.type = type;
      this.items = item;
    }, 
    test(item){
      this.$router.push("/mainAll/test/"+item.paperId);
    },
    handleSelect1(key, keyPath) {
      
    },
    handleSelect2(key, keyPath) {
      
    },
    goContent(item){
      this.$router.push("/main/movieContent/"+item.id)
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    comment(item,index,type){
    console.log(item,index,type);
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      if(type){
        if(this.textarea1==""){
          Notification.warning({
            title:'提示',
            message:"请输入评论内容"
          })
          return;
        }
        if(item.type=="1"){
          var data = {
            content:this.textarea1,
            id:this.$route.params.id,
            type:"1",
            parentId:item.id
          }
        }
        else{
          var data = {
            content:this.textarea1,
            id:this.$route.params.id,
            type:"1",
            parentId:this.id
          }
        }
        
      }
      else{
        if(this.textarea==""){
          Notification.warning({
            title:'提示',
            message:"请输入评论内容"
          })
          return;
        }
        var data = {
          content:this.textarea,
          id:this.$route.params.id,
          type:"1",
          parentId:"0"
        }
      }
      var that = this;
      this.$axios.$post("/f/common/addContent?id="+data.id+"&content="+data.content+"&type=1"+"&parentId="+data.parentId)
      .then(function (response) {
        Notification.success({
          title:'提示',
          message:"已提交"
        })
        if(that.pageNo==1){
          that.getCom();
        }
        if(type){
          that.textarea1 = "";
          if(index || index==0){
            var obj = {};
            obj.userName = Cookies.get("mobile");
            obj.businessName = "";
            obj.content = data.content;
            obj.createDate = response.data.createDate;
            that.taoList[index].educationContentList.unshift(obj);
            var len1 = that.taoList[index].educationContentList.length;
            that.taoList[index].educationContentList[len1-1].addClass="no-border";
          }
        }
        else{
          that.textarea = "";
        }

      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getcomment(){
      var that = this;
      this.$axios.$get("http://seed.ckwashington.com/admin/mini/video/getContent?businessId="+this.$route.params.id+"&pageNo="+this.pageNo+"&pageSize=10")
      .then(function (response) {
        var data = response.data.list;
        that.total = response.data.count;
        var len = data.length;
        if(len!=0){
          for(var i=0;i<len;i++){
            data[i].show = false;
            if(data[i].educationContentList!=""&&data[i].educationContentList.length!=0){
              var len1 = data[i].educationContentList.length;
              data[i].educationContentList[len1-1].addClass="no-border";
            }
          }
        }
        
        that.taoList = data;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    addCenter(){
      if(!Cookies.get("type")){
        return;
      }
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/addCourseStudyRecord?courseId="+this.$route.params.id+"&type=1")
      .then(function (response) {
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getRecom(){
      var that = this;
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/queryCourseRecList?type=1")
      .then(function (response) {
        var data = response.data.educationVideos;
        var len = data.length;
        var arr = [];
        if(len!=0){
          if(len>=5){
            for(var i=0;i<5;i++){
              data[i].photo = "http://seed.ckwashington.com"+data[i].photo;
              if(data[i].youhuiFlag=="1"){
                data[i].courseVipType="4"
                data[i].presentPrice = data[i].educationCourseYouhui.youhuiPrice;
                data[i].startTime = data[i].educationCourseYouhui.startTime.substring(0,10);
                data[i].endTime = data[i].educationCourseYouhui.endTime.substring(0,10);
              }
              if(data[i].score==""){
                data[i].score = null;
              }
              else{
                data[i].score = Number(data[i].score)
              }
              arr.push(data[i]);
            }
          }
          else{
            for(var i=0;i<len;i++){
              data[i].photo = "http://seed.ckwashington.com"+data[i].photo;
              if(data[i].youhuiFlag=="1"){
                data[i].courseVipType="4"
                data[i].presentPrice = data[i].educationCourseYouhui.youhuiPrice;
                data[i].startTime = data[i].educationCourseYouhui.startTime.substring(0,10);
                data[i].endTime = data[i].educationCourseYouhui.endTime.substring(0,10);
              }
              if(data[i].score==""){
                data[i].score = null;
              }
              else{
                data[i].score = Number(data[i].score)
              }
              arr.push(data[i]);
            }
          }
        }
        that.courseList = arr;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    addCollect(item){
      var that = this;
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/addCollection?courseId="+item.id+"&type=1")
      .then(function (response) {
        console.log(response);
        Notification.success({
          title:'提示',
          message:"已提交"
        })
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getCom(){
      var that = this;
      this.$axios.$post("/f/common/getContent?type=1"+"&id="+this.$route.params.id+"&pageNo="+this.pageNo+"&pageSize="+this.pageSize)
      .then(function (response) {
        let list = response.data;
        list.forEach((item,i)=>{
          item.show = false;
          item.userPhoto = "http://www.jzcqedu.com:8080"+item.userPhoto
        })
        that.taoList = list;
        that.total = response.count;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getData(){
      var that = this;
      this.loading = true;
      this.$axios.$post("/f/course?id="+this.$route.params.id)
      .then(function (response) {
        console.log(response,19878)
        let data = Object.assign(response.data.course,response.data.course);
        //that.vip = response.data.vip;
        //data.photo = "http://www.jzcqedu.com:8080"+data.photo;

        if(data.score==""){
          data.score=0
        }
        else{
          data.score = Number(data.score)
        }
        data.buy = response.data.buy;
        data.coll = response.data.coll;
        data.zan = response.data.zan;
        if(Number(data.presentPrice)==0){
          data.isTree = true;
        }
        if(data.youhuiFlag=="1"){
          data.courseVipType="4"
          data.presentPrice = data.educationCourseYouhui.youhuiPrice;
          data.startTime = data.educationCourseYouhui.startTime.substring(0,10);
          data.endTime = data.educationCourseYouhui.endTime.substring(0,10);
        }
        
        console.log(data,33)
        that.content = data;

        let hot = response.data.courseDbRecDTOList;
        if(hot!=""){
          let arr = [];
          hot.forEach((item,i)=>{
            //item.photo = "http://www.jzcqedu.com:8080"+item.photo;
            item = Object.assign(item,item.courseInfo)
            if(item.youhuiFlag=="1"){
                item.courseVipType="4"
                item.presentPrice = item.educationCourseYouhui.youhuiPrice;
                item.startTime = item.educationCourseYouhui.startTime.substring(0,10);
                item.endTime = item.educationCourseYouhui.endTime.substring(0,10);
              }
            if(i<4){
              arr.push(item)
            }
          });
          that.courseList = arr;
        }
        console.log(222222)

        let doc = data.educationDocList;
        if(doc!=""){
          let arr1 = [];
          doc.forEach((item,i)=>{
            item.files = "http://www.jzcqedu.com:8080"+item.files;
            arr1.push(item);
          });
          that.muluList3 = arr1;
        }
        
        console.log(1111111111)
        let detail = data.educationCourseDbDetailsList;
        if(detail!=""){
          let arr2 = [];
          detail.forEach((item,i)=>{
            arr2.push(item);
          });
          that.muluList1 = arr2;
        }
        

        that.loading = false;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
        that.loading = false;
      })
    }
  }
}
</script>

<style lang="less" >
  .movieContent-main{
    width:100%;
    background:#f7f7f7;
    .movieAll{
      width:1250px;
      margin:0 auto;
      .course-content1{
        width:100%;
        margin-top:35px;
        margin-bottom:100px;
        position:relative;
        float:left;
        .content-right{
          float:left;
          width:280px;
          box-sizing:border-box;
          border:1px solid #0076ca;
          .hot-all{
            width:240px;
            margin:0 auto;
          }
          .hot-item{
            width:240px;
            margin-bottom:15px;
            cursor:pointer;
            float:left;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
            img{
              width:240px;
              height:180px;
              display:block;
            }
            .name{
              width: 100%;
              display: block;
              line-height: 25px;
              margin-top: 10px;
              height: 25px;
              font-size: 18px;
              color: #222222;
              text-align: left;
              padding-left: 10px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            .price{
              width: 100%;
              display: block;
              line-height: 25px;
              margin-top: 5px;
              height: 25px;
              font-size: 18px;
              color: #0076ca;
              text-align: left;
              margin-bottom:5px;
              padding-left: 10px;
              font-weight:600;
            }
          }
          .title{
            height:50px;
            line-height:50px;
            text-align:center;
            font-size:16px;
            color:#ffffff;
            background:#0076ca;
            margin-bottom:15px;
          }
        }
        .content-left{
          width:950px;
          float:left;
          margin-right:20px;
          .course-text{
            width:100%;
            background:#ffffff;
            padding:30px;
            box-sizing:border-box;
            font-size: 16px;
            color: #444444;
            img{
              max-width:100%;
            }
          }
          .el-tabs__content{
            .taolun{
              width:100%;
              border-radius:10px;
              padding:0 40px;
              padding-top:20px;
              padding-bottom:40px;
              background:#ffffff;
              .taolun-content{
                width:100%;
                padding:0 35px;
                .taolun-item{
                  width:100%;
                  margin-bottom:15px;
                  border-top:1px solid #d2d2d2;
                  text-align:left;
                  .man-img{
                    float:left;
                    width:40px;
                    height:40px;
                    border-radius:50%;
                    display:block;
                    margin-right:10px;
                    margin-top:10px;
                  }
                  .name{
                    width:calc(100% - 50px);
                    display:block;
                    line-height:40px;
                    margin-top:10px;
                    font-size:18px;
                    color:#222222;
                    float:left;
                    font-weight:600;
                  }
                  .content{
                    width:100%;
                    display:block;
                    line-height:25px;
                    margin-top:6px;
                    font-size:16px;
                    color:#222222;
                    float:left;
                  }
                  .huifuList{
                    width:100%;
                    margin-top:15px;
                    background:#f7f7f7;
                    border:1px solid #d2d2d2;
                    border-radius:2px;
                    padding:10px 15px;
                    float:left;
                    .no-border{
                      border:0 !important;
                      margin-bottom:0  !important;
                    }
                    .huifu-item{
                      width:100%;
                      border-bottom:1px dashed #d2d2d2;
                      margin-bottom:12px;
                      .content1{
                        line-height: 25px;
                        font-size: 16px;
                        color: #888888;
                      }
                      .huifu-bottom{
                        width:100%;
                        height:25px;
                        margin-bottom:5px;
                        margin-top:5px;
                        .huifu{
                          float:right;
                          height:100%;
                          .text{
                            line-height:25px;
                            font-size:14px;
                            color:#888888;
                            margin-right:7px;
                            float:left;
                            cursor:pointer;
                          }
                          img{
                            width:24px;
                            height:15px;
                            display:block;
                            cursor:pointer;
                            margin-top:6px;
                            float:left;
                          }
                        }
                        .time1{
                          line-height:25px;
                          font-size:16px;
                          color:#888888;
                        }
                      }
                    }
                    .huifu-item:last-child{
                      border-bottom:0
                    } 
                  }
                  .text-main1{
                      width:100%;
                      margin-top:15px;
                      position:relative;
                      float:left;
                      .hui{
                        color:#888888;
                        font-size:14px;
                        cursor:pointer;
                        position:absolute;
                        right:7px;
                        bottom:7px;
                      }
                      img{
                        width:21px;
                        height:21px;
                        display:block;
                        position:absolute;
                        right:7px;
                        bottom:7px;
                        cursor:pointer;
                      }
                      textarea{ 
                        resize:none;
                        height:60px;
                        line-height:20px;
                        padding:10px 15px;
                        background:#f7f7f7;
                        border:1px solid #d2d2d2;
                        border-radius:2px;
                        overflow:hidden;
                      } 
                    }
                  .taolun-bottom{
                    width:100%;
                    margin-top:6px;
                    height:25px;
                    float:left;
                    .huifu{
                      float:right;
                      height:100%;
                      margin-right:15px;
                      .text{
                        line-height:25px;
                        font-size:14px;
                        color:#888888;
                        margin-right:7px;
                        float:left;
                        cursor:pointer;
                      }
                      img{
                        width:24px;
                        height:15px;
                        display:block;
                        cursor:pointer;
                        margin-top:6px;
                        float:left;
                      }
                    }
                    .time{
                      line-height:25px;
                      font-size:16px;
                      color:#888888;
                    }
                  }
                }
              }
              .text-main{
                width:100%;
                position:relative;
                margin-bottom:40px;
                margin-top:30px;
                .button{
                  width: 65px;
                  height: 32px;
                  text-align: center;
                  line-height: 32px;
                  color: #6198fd;
                  font-size: 15px;
                  background: #f6f6f6;
                  cursor: pointer;
                  position: absolute;
                  right: 20px;
                  top: -31px;
                  border: 1px solid #6198fd;
                  border-bottom: 0;
                }
                .submit-button{
                  width:100px;
                  height:30px;
                  line-height:30px;
                  text-align:center;
                  color:#ffffff;
                  font-size:14px;
                  border-radius:3px;
                  cursor:pointer;
                  background:#6198fd;
                  margin:20px 0 ;
                  float:right;
                }
                .top-textarea{
                  textarea{ 
                    resize:none;
                    height:140px;
                    line-height:20px;
                    padding:15px 20px;
                    background:#f6f6f6;
                    border:1px solid #6198fd;
                    border-radius:4px;
                    overflow:hidden;
                    
                  } 
                  textarea::-webkit-input-placeholder{
                    color:#a0a0a0;
                    font-size:16px;
                    font-weight:600;
                  }
                }
              }
              
            }
            .ping-main{
              width:100%;
              
              padding:0 40px;
              padding-top:20px;
              display:flex;
              flex-wrap:wrap;
              justify-content:center;
              background:#fff;
              .pingList{
                width:100%;
                .pingList-item{
                  width:100%;
                  margin-bottom:20px;
                  border-bottom: 1px dashed #d2d2d2;
                  float:left;
                  img{
                    width:50px;
                    height:50px;
                    display:block;
                    margin-right:15px;
                    float:left;
                    border-radius:50%;
                  }
                  .ping-right{
                    width:calc(100% - 65px);
                    float:right;
                    .man{
                      line-height:40px;
                      float:left;
                      font-size:16px;
                      color:#000000;
                    }
                    .time{
                      line-height:40px;
                      float:right;
                      font-size:14px;
                      color:#888888;
                    }
                    .content{
                      width:100%;
                      float:left;
                      margin:0px 0 15px 0;
                      line-height:25px;
                      font-size:16px;
                      text-align:left;
                      color:#000000;
                    }
                  }
                }
              }
              .text-main{
                width:100%;
                position:relative;
                margin-bottom:40px;
                .button{
                  width:65px;
                  height:32px;
                  text-align:center;
                  line-height:32px;
                  color:#ffffff;
                  font-size:15px;
                  background:#1676cc;
                  cursor:pointer;
                  position:absolute;
                  right:10px;
                  bottom:10px;
                }
                .top-textarea{
                  textarea{ 
                    resize:none;
                    height:140px;
                    line-height:20px;
                    padding:15px 20px;
                    background:#f6f6f6;
                    border:2px solid #1676cc;
                    border-radius:8px;
                    overflow:hidden;
                  } 
                  textarea::-webkit-input-placeholder{
                    color:#a0a0a0;
                    font-size:16px;
                    font-weight:600;
                  }
                }
              }
              .ping{
                  height:30px;
                  margin:0 auto;
                  position:relative;
                  margin-bottom:40px;
                  .title1{
                      color:#1676cc;
                      float:left;
                      line-height:30px;
                      font-size:16px;
                  }
                  .rate-main{
                      float:left;
                      height:30px;
                      line-height:28px;
                      margin-right:45px;
                      .el-rate__icon,.el-rate__decimal{
                          line-height:30px;
                          font-size:22px;
                          margin-right:4px;
                      }
                      .el-rate__text{
                          position:relative;
                          top:-2px;
                      }
                  }
                  .teacher{
                      float:left;
                      line-height:30px;
                      color:#888888;
                      font-size:16px;
                  }
              }
            }
            .mulumain{
              width:100%;
              margin-top:20px;
              .mulu-item{
                width: calc(100% - 10px);
                margin: 0 5px;
                height: 60px;
                box-shadow: 0 1px 8px 0 rgba(210, 210, 210, 0.35);
                border-radius:5px;
                margin-bottom:25px;
                position:relative;
                background:#ffffff;
                .progress-top{
                  width:100%;
                  height:20px;
                  margin-top:20px;
                  float:left;

                  .top-title{
                    line-height:20px;
                    padding-left:25px;
                    font-size:20px;
                    color:#555555;
                    float:left;
                  }
                  .right{
                    height:20px;
                    float:right;
                    width:300px;
                    .name1{
                      line-height:20px;
                      font-size:15px;
                      color:#444444;
                      float:left;
                      width:80px;
                    }
                    .el-progress{
                      width:calc(100% - 80px);
                      float:left;
                      line-height:20px;
                    }
                  }
                }
                .text{
                  width:100%;
                  height:20px;
                  line-height:20px;
                  box-sizing:border-box;
                  padding-left:25px;
                  margin-top:20px;
                  font-size:16px;
                  float:left;
                  display:block;
                }
                .bofang{
                  position:absolute;
                  width:80px;
                  height:30px;
                  top:15px;
                  right:15px;
                  line-height:30px;
                  border-radius:5px;
                  text-align:center;
                  color:#ffffff;
                  font-size:14px;
                  background:#3a7bf3;
                  cursor:pointer;
                  a{
                    display:block;
                    width:100%;
                    height:100%;
                    text-align:center;
                    line-height:30px;
                    color:#ffffff;
                    text-decoration:none;
                  }
                }
                .ceshi{
                  background:#1676cc;
                }
                .dian{
                  width:4px;
                  height:4px;
                  margin-left:15px;
                  margin-top:28px;
                  margin-right:15px;
                  display:block;
                  float:left;
                  background:#1676cc;
                }
                .name{
                  line-height:60px;
                  float:left;
                  color:#555555;
                  font-size:16px;
                  padding-left:25px;
                }
                .man{
                  position: absolute;
                  right: 150px;
                  top: 55px;
                  line-height: 30px;
                  font-size: 14px;
                  display:block;
                  color: #ff541e;
                  display:block;
                  .text1{
                    font-size:14px;
                  }
                  .iconwodeicon:before{
                    margin-left:5px;
                  }
                }
                .iconbofang2{
                  font-size:22px;
                  color:#aba4a4;
                }
              }
            }
          }
          .el-tabs__nav-wrap::after{
            display:none;
          }
          .el-tabs__nav-wrap{
            overflow:unset;
            .el-tabs__nav-scroll{
              overflow:unset;
            }
          }
          .el-tabs__item.is-active{
              padding: 0 15px;
              color: #fff;
              font-size: 16px;
              color:#3a7bf3;
              position:relative;
          }
          
          .el-tabs__item.is-active:after{
            width: 80%;
            height: 3px;
            content: '';
            background: #3a7bf3;
            position: absolute;
            right: 10%;
            bottom: 0;
          }
          .el-tabs__item{
            height:58px;
            line-height:58px;
            padding: 0 15px;
            font-size: 16px;
            margin-right:30px;
            color: #444444;
          }
          .el-tabs__item:hover{
            color: #444444;
          }
          .el-tabs__header{
            height:60px;
            background:#ffffff;
            padding:0 30px;
            box-shadow: 0 10px 12px rgba(226,226,226,0.5);
          }
          .el-tabs__active-bar{
            display:none;
          }
        }
        .content-right{
          
        }
      }
      .courser-top{
        width:100%;
        height:390px;
        background:#ffffff;
        padding:35px;
        box-sizing:border-box;
        .course-main{
          width:560px;
          height:100%;
          float:left;
          margin-right:40px;
        }
        .course-right{
          width:calc(100% - 600px);
          height:100%;
          float:left;
          position:relative;
          .title{
            text-align:left;
            margin-top:15px;
            line-height:30px;
            font-size:24px;
            color:#222222;
            float:left;
            margin-right:12px;
          }
          .vip-icon{
            width:55px;
            height:20px;
            margin-top:35px;
            display:block;
            float:left;
          }
          .xin{
            position:absolute;
            height:25px;
            right:10px;
            bottom:-10px;
            .number{
              line-height:25px;
              font-size:14px;
              color:#888888;
              float:left;
              margin-right:10px;
              cursor:pointer;
            }
            .iconzan1{
              color:#d83c3c;
            }
            .iconxin{
              width:25px;
              height:25px;
              float:left;
              line-height:25px;
              display:block;
              text-align:center;
              color:#888888;
              font-size:18px;
              cursor:pointer;
            }
            .iconxin1{
              color:#d83c3c;
            }
          }
          .mai{
            float:left;
            width:150px;
            cursor:pointer;
            height:45px;
            background-size:100% 100%;
            line-height:45px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#3a7bf3;
            margin-top:25px;
            margin-right:15px;
          }
          .see{
            float:left;
            width:150px;
            cursor:pointer;
            height:45px;
            background-size:100% 100%;
            line-height:45px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#f54337;
            margin-top:25px;
          }
          .price{
            width:100%;
            display:block;
            text-align:left;
            margin-top:10px;
            line-height:30px;
            height:30px;
            color:#ef5a24;
            font-size:28px;
            float:left;
            font-weight:600;
            .old-price{
              margin-left:10px;
              font-size:18px;
              font-weight:500;
              color:#666666;
              text-decoration:line-through;
            }
          }
          .ping{
              width:100%;
              height:30px;
              margin-top:10px;
              position:relative;
              float:left;
              .title1{
                  color:#888888;
                  float:left;
                  line-height:30px;
                  font-size:16px;
              }
              .rate-main{
                  float:left;
                  height:30px;
                  line-height:28px;
                  margin-right:10px;
                  .el-rate__icon,.el-rate__decimal{
                      line-height:30px;
                      font-size:22px;
                      margin-right:4px;
                  }
                  .el-rate__text{
                      position:relative;
                      top:-2px;
                  }
              }
              .teacher1{
                  float:left;
                  line-height:30px;
                  color:#888888;
                  font-size:16px;
              }
          }
          .content{
            width:100%;
            margin-top:20px;
            height:80px;
            line-height:20px;
            font-size:16px;
            color:#666666;
            float:left;
            text-align:left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
          .sou{
            padding:0;
            width:40px;
            height:40px;
            line-height:30px;
            color:#444444;
            position:absolute;
            background:rgba(0,0,0,0);
            top:10px;
            font-size:16px;
            right:0px;
            border:1px solid #e8e8e8;
          }
        }
      }
    }
    .classroom-main{
        width:1250px;
        margin:0 auto;
        .el-breadcrumb{
            margin:30px 0;
            font-size:15px;
            padding-left:10px;
        } 
    }
  }
    
</style>



